<template>
    <div>
        <div class="seatDetail">
            <span>目前A区车位数: <el-tag>{{ seatnum.A }}</el-tag></span>
            <span>目前B区车位数: <el-tag>{{ seatnum.B }}</el-tag></span>
            <span>目前C区车位数: <el-tag>{{ seatnum.C }}</el-tag></span>
        </div>
        <el-divider content-position="center">下方填写信息</el-divider>
        <el-form :model="form" :rules="rules" ref="form" label-width="120px" style="width: 700px;">
            <el-form-item label="车位号" prop="id">
                <div>
                    <el-input placeholder="请输入" v-model="form.id" class="input-with-select">
                        <el-select v-model="select" slot="prepend" placeholder="请选择" style="width:60px;">
                            <el-option label="A" value="A"></el-option>
                            <el-option label="B" value="B"></el-option>
                            <el-option label="C" value="C"></el-option>
                        </el-select>
                    </el-input>
                </div>
            </el-form-item>
            <el-form-item label="是否使用" prop="isEmpty">
                <div>
                    <el-radio v-model="form.isEmpty" label="1" border size="medium">使用中</el-radio>
                    <el-radio v-model="form.isEmpty" label="0" border size="medium">空闲</el-radio>
                </div>
            </el-form-item>
            <el-form-item label="是否可用" prop="isEnable">
                <div>
                    <el-radio v-model="form.isEnable" label="0" border size="medium">可用</el-radio>
                    <el-radio v-model="form.isEnable" label="1" border size="medium">维修</el-radio>
                </div>
            </el-form-item>
            <el-form-item label="是否预定" prop="predetermined">
                <div>
                    <el-radio v-model="form.predetermined" label="1" border size="medium">已预定</el-radio>
                    <el-radio v-model="form.predetermined" label="0" border size="medium">未预定</el-radio>
                </div>
            </el-form-item>
            <el-form-item label="驶入时间">
                <div class="block">
                    <el-date-picker v-model="form.arrive_time" type="datetime" placeholder="选择日期时间"
                        default-time="12:00:00">
                    </el-date-picker>
                </div>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="form.inFo" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addSeat">确 定</el-button>
                <el-button @click="resetForm('form')">重置</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
export default {
    inject: ['reload'],
    data() {
        return {
            form: {
                id: '',
                isEmpty: '',
                isEnable: '',
                predetermined: '',
                arrive_time: '',
                inFo: ""
            },
            select: 'A',
            seatnum: { A: 0, B: 0, C: 0 },
            rules: {
                id: [{ required: true, message: '车位号不能为空', trigger: 'blur' }],
                isEmpty: [{ required: true, message: '请选择' }],
                isEnable: [{ required: true, message: '请选择' }],
                predetermined: [{ required: true, message: '请选择' }],
            }
        }
    },
    methods: {
        //重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        addSeat() {
            this.form.id = this.select + this.form.id;
            this.$refs['form'].validate(valid => {
                if (valid) {
                    this.$http.carSeatApi.addSeat(this.form).then(res => {
                        if (res.data.code == 200) {
                            this.resetForm('form');
                            this.$message({
                                message: '添加车位成功',
                                type: 'success'
                            });
                            this.reload();
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                } else {
                    this.$message.error('请检查输入项');
                }
            })
        },
        getId(num) {
            if (num >= 1 && num < 10) { return '00' + num }
            if (num >= 10 && num < 100) { return '0' + num }
        }
    },
    mounted() {
        this.$http.carSeatApi.querySeat({ qid: 'A' }).then(res => {
            this.seatnum.A = this.getId(res.data.data.length * 1);
        });
        this.$http.carSeatApi.querySeat({ qid: 'B' }).then(res => {
            this.seatnum.B = this.getId(res.data.data.length * 1);
        });
        this.$http.carSeatApi.querySeat({ qid: 'C' }).then(res => {
            this.seatnum.C = this.getId(res.data.data.length * 1);
        });
    },
}
</script>

<style lang="scss" scoped>
.input-with-select .el-input-group__prepend {
    background-color: #fff;
}

.seatDetail {
    width: 600px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    >span {
        >.el-tag {
            font-size: 20px;
        }
    }
}
</style>